<template>
  <div id="app">
    <nav class="nav" v-show="flag">
      <router-link to="/" exact>
        <span class="iconfont icon-xingzhuanggongnengtubiao-"></span>
        首页
      </router-link>
      <router-link to="/service">
        <span class="iconfont icon-gengduofuwu"></span>
        全部服务</router-link
      >
      <router-link to="/news">
        <span class="iconfont icon-xinwen"></span>
        新闻</router-link
      >
      <router-link to="/mine">
        <span class="iconfont icon-dibulan-gerenzhongxin"></span>
        个人中心</router-link
      >
    </nav>
    <router-view />
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["flag"]),
  },
};
</script>

<style lang="scss" scoped>
#app {
  padding-bottom: 80px;
  background: #eeeeee;

  .nav {
    background: #fff;
    height: 52px;
    width: 100%;
    display: flex;
    position: fixed;
    z-index: 9;
    left: 0;
    bottom: 0;
    a {
      flex: 1;
      font-size: 16px;
      text-align: center;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      flex-direction: column;
      span {
        font-size: 30px;
        color: #42e59b;
      }
    }
    a.router-link-exact-active {
      color: aqua;
    }
  }
}
</style>
